<template>
  <div class="dashboard">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="今日销售额"
            :value="112893"
            :precision="2"
            suffix="元"
            :value-style="{ color: '#3f8600' }"
          >
            <template #prefix>
              <ArrowUpOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="订单数量"
            :value="1128"
            suffix="单"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <ShoppingCartOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="库存预警"
            :value="23"
            suffix="种商品"
            :value-style="{ color: '#cf1322' }"
          >
            <template #prefix>
              <ExclamationCircleOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="活跃会员"
            :value="9280"
            suffix="人"
            :value-style="{ color: '#722ed1' }"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px;">
      <a-col :span="12">
        <a-card title="快速导航" :bordered="false">
          <a-row :gutter="16">
            <a-col :span="8" v-for="item in quickNavItems" :key="item.key">
              <a-card 
                size="small" 
                hoverable 
                @click="navigateTo(item.path)"
                style="text-align: center; margin-bottom: 16px; cursor: pointer;"
              >
                <component :is="item.icon" style="font-size: 24px; color: #1890ff;" />
                <div style="margin-top: 8px;">{{ item.title }}</div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      
      <a-col :span="12">
        <a-card title="系统公告" :bordered="false">
          <a-list
            item-layout="horizontal"
            :data-source="announcements"
          >
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta
                  :title="item.title"
                  :description="item.date"
                />
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ArrowUpOutlined,
  ShoppingCartOutlined,
  ExclamationCircleOutlined,
  UserOutlined,
  DatabaseOutlined,
  ShopOutlined,
  TeamOutlined,
  BarChartOutlined,
  SettingOutlined,
  DollarOutlined,
} from '@ant-design/icons-vue'

// 快速导航数据
const quickNavItems = ref([
  { key: 'master-data', title: '档案管理', icon: DatabaseOutlined, path: '/master-data' },
  { key: 'procurement', title: '采购管理', icon: ShoppingCartOutlined, path: '/procurement' },
  { key: 'operation', title: '营运管理', icon: ShopOutlined, path: '/operation' },
  { key: 'member', title: '会员管理', icon: TeamOutlined, path: '/member' },
  { key: 'analytics', title: '决策管理', icon: BarChartOutlined, path: '/analytics' },
  { key: 'system', title: '系统设置', icon: SettingOutlined, path: '/system' },
])

// 系统公告数据
const announcements = ref([
  { title: '系统维护通知：本周六凌晨2:00-4:00进行系统升级', date: '2024-01-15' },
  { title: '新功能上线：生鲜管理模块增加保质期预警功能', date: '2024-01-12' },
  { title: '培训通知：ERP系统操作培训将于下周三举行', date: '2024-01-10' },
  { title: '数据备份完成：12月份数据已完成备份', date: '2024-01-08' },
])

// 导航处理
const navigateTo = (path: string) => {
  window.history.pushState(null, '', path)
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.ant-card {
  margin-bottom: 16px;
}
</style>